<template>
  <HeadTwo :activeIndex="activeIndex"></HeadTwo>
  <el-row>
    <el-breadcrumb separator=">">
      <div style="margin-top: 15px; margin-left: 18px">
        <el-breadcrumb-item :to="{ path: '/' }" class="text-base">首页</el-breadcrumb-item>
        <el-breadcrumb-item class="text-base">种植过程管理</el-breadcrumb-item>
        <el-breadcrumb-item class="text-base">生产环境数据</el-breadcrumb-item>
      </div>
    </el-breadcrumb>
  </el-row>
  <el-card shadow="always" style="margin: 20px;">
    <el-row :gutter="20">
        <search-bar
                :add-text = searchBarText.addText
                :search-text= searchBarText.searchText
                :placeholder-context= searchBarText.placeholderContext
                @initIotInfo="init"
                @handleDialogIotValue="handleDialogIotValue"
        >
        </search-bar>
      <one-table
          :table-data="tableData"
          :options-info="iotInfo"
          @handle-dialog-iot-value="handleDialogIotValue"
          @del-iot-info="deleteIotInfo"
      >
      </one-table>
      <paging
          :queryForm="queryForm"
          @my-size-change="handleSizeChange"
          @my-current-change="handleCurrentChange"
      >
      </paging>
    </el-row>
  </el-card>
  <dialog-ios
          v-model="dialogVisible"
          v-if="dialogVisible"
          :dialogIotTableValue="dialogIotTableValue"
          :dialog-ios-title="dialogIotTitle"
          :queryForm="queryForm"
          @handleConfirm="handleConfirm"
  ></dialog-ios>
</template>

<script setup>
import {useRouter} from "vue-router";
import HeadTwo from "@/components/header/headTwo.vue";
import OneTable from "@/components/table/oneTable.vue";
import {onMounted, ref} from "vue";
import {addIotInfo, delIotInfo, editIotInfo, upIotInfo} from "@/api/apiPath/twoPart.js";
import {iotInfo} from "@/api/options/twoPart/iotInfo.js";
import {initTableInfo} from "@/api/methods/initInfo.js";
import Paging from "@/components/pagination/paging.vue";
import SearchBar from "@/components/commons/searchBar.vue";
import {isNull} from "@/api/filters.js";
import {ElMessage, ElMessageBox, ElNotification} from "element-plus";
import {addTableInfo} from "@/api/methods/addInfo.js";
import {updateFormInfo} from "@/api/methods/updateInfo.js";
import {delTableInfo} from "@/api/methods/delInfo.js";
import DialogIos from "@/components/dialog/two/dialogIos.vue";
import DialogCg from "@/components/dialog/two/dialogCg.vue";

const router = useRouter()
const activeIndex = '/iotInfo'
const tableData = ref([])
const dialogIotTitle = ref('')
const dialogIotTableValue = ref({})
const dialogVisible = ref(false)
const queryForm = ref({
  query: '',
  pageNum: 1,
  pageSize: 12,
  totalSize: 0
})
const searchBarText = ref({
    addText : "新增生产环境数据",
    searchText : "搜索生产环境数据",
    placeholderContext: "请输入产地名称"
})
const init = (query)=> {
  queryForm.value.query = query
  initTableInfo(upIotInfo(queryForm.value), tableData, queryForm)
}
onMounted(()=> {
  init()
})
const handleDialogIotValue = (row)=> {
    // console.log(isNull(row))
    if (isNull(row)) {
        dialogIotTitle.value = "新增生产环境数据"
        dialogIotTableValue.value = {
        }
    } else {
        dialogIotTitle.value = "搜索生产环境数据"
        dialogIotTableValue.value = JSON.parse(JSON.stringify(row))
    }
    dialogVisible.value = true
}
const handleConfirm = async (formValue, formRef)=> {
    formValue = ref(formValue)
    formRef.validate( async valid => {
        if (!valid) {
            ElMessage({
                message: "请填写完整！",
                type: 'warning',
                duration: 1500
            })
        } else {
            try {
                dialogIotTitle.value === '新增生产环境数据'
                    ? addTableInfo(addIotInfo(), formValue, upIotInfo(queryForm.value), tableData, queryForm)
                    : updateFormInfo(editIotInfo(), formValue, upIotInfo(queryForm.value), tableData, queryForm)
                dialogVisible.value = false
            }catch (err) {
                console.log("errorOne" + err)
                ElNotification({
                    message: "请求失败~",
                    type: 'error',
                    duration: 1500
                })
                dialogVisible.value = false
            }
        }
    })
}
const deleteIotInfo = (row)=> {
    ElMessageBox.confirm(
        '此操作将永久删除该信息，是否继续？',
        '提示',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(async () => {
            try {
                delTableInfo(delIotInfo(row.bh), tableData, queryForm, upIotInfo(queryForm.value))
                dialogVisible.value = false
            } catch (e) {
                console.log(e)
                ElNotification({
                    message: "请求失败",
                    type: 'error',
                    duration: 1500
                })
                dialogVisible.value = false
            }
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '已取消删除',
            })
            dialogVisible.value = false
        })
}
const handleSizeChange = (pageSize) => {
  queryForm.value.pageSize = pageSize;
  queryForm.value.pageNum = 1;
  init();
};
const handleCurrentChange = (pageNum) => {
  queryForm.value.pageNum = pageNum;
  init();
};
</script>

<style scoped>

</style>